<template>
	<view class="container">
		<view class="header">
			基本信息
		</view>
		<view style="background-color: #FFFFFF;width: 750rpx;padding: 0 31rpx;box-sizing: border-box;">
			<u-form labelWidth="300rpx" labelPosition="left" style="width: 688rpx;"
				:label-style="{ 'font-size': '24rpx' }" :model="model" :rules="rules" ref="uForm">
				<u-form-item style="height: 100rpx;line-height: 50rpx;" label="BOM单号" borderBottom ref="item1">
					<!-- <view > -->
						<input style="fontSize:'24rpx';text-align: right;" placeholder-style="font-size: 24rpx;"
							type="text" placeholder="请输入BOM单编码"
							v-model="model.count" />
					<!-- </view> -->
				</u-form-item>
				<u-form-item style="height: 100rpx;line-height: 50rpx;" label="BOM名称" borderBottom ref="item1">
					<view >
						<input style="fontSize:'24rpx';text-align: right;" placeholder-style="font-size:24rpx;"
							type="text" placeholder="请输入名称"
							v-model="model.count" />
					</view>
				</u-form-item>
				<u-form-item style="height: 100rpx;line-height: 50rpx;" label="助记名" borderBottom ref="item1">
					<view >
						<input style="fontSize:'24rpx';text-align: right;" placeholder-style="font-size:24rpx;"
							type="text" placeholder="请输入助记名"
							v-model="model.count" />
					</view>
				</u-form-item>
				<u-form-item style="height: 100rpx;line-height: 50rpx;" label="生产类型" borderBottom ref="item1">
					<view >
						<input style="fontSize:'24rpx';text-align: right;" placeholder-style="font-size:24rpx;"
							type="text" placeholder="请选择类型"
							v-model="model.count" />
					</view>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="material">
			物料信息
		</view>
		<view v-for="(item,index) in material" :key="index" class="all">
			<view class="materialBlock">
				<view>物料</view>
				<view style="color: #999999 ;">{{item.productName}}</view>
			</view>
			<view class="materialBlock">
				<view>物料数量</view>
				<view style="color: #999999 ;">{{item.count}}</view>
			</view>
			<view class="materialBlock" style="border: none;">
				<view>备注</view>
				<view style="color: #999999 ;">{{item.remark?item.remark:'暂无'}}</view>
			</view>
		</view>
		
		<view class="submit">
			<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">{{id?'提交':'确认新增'}}</u-button>
		</view>
		 <u-picker :show="show" :columns="types" keyName="label" @cancel="show=false" @confirm="handeleConfirm"></u-picker>
		 <u-picker :show="bomShow" :columns="boms" keyName="productName" @cancel="bomShow=false" @confirm="handeleBom"></u-picker>
	</view>
</template>

<script>
	import {createBom} from '@/api/store.js'
	export default{
		data(){
			return{
				model:{},
				rules: {
					productName: [{
						required: true,
						message: '请输入货品名称',
						trigger: ['change']
					}],
					name1: [{
						required: true,
						message: '请输入库管人员',
						trigger: ['change']
					}],
					name2: [{
						required: true,
						message: '请输入批次号',
						trigger: ['change']
					}],
					count: [{
						required: true,
						message: '请输入实际入库数量',
						trigger: ['change']
					}],
					name4: [{
						required: true,
						message: '请输入最高预警数量',
						trigger: ['change']
					}],
					name5: [{
						required: true,
						message: '请输入最低预警数量',
						trigger: ['change']
					}],
					name6: [{
						required: true,
						message: '请输入有效期',
						trigger: ['change']
					}],
				},
				bomShow:false,
				show:false,
				placeholderStyle:{
					fontSize: '24rpx'
				},
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				loading:false,
				obj:{
					bomId:0,
					bomCode:'',//BOM单号
					type:'',//生产类型
					id:'',//类型id
					name:''
				},
				types:[//生产类型
					[
						{id:'1',label:'组合'},
						{id:'2',label:'拆分'},
					]
					
				],
				material:[ //主料与辅料信息
					{
						id:1,
						productName:'大白菜',
						count:1000,
						remark:'',
						unitName:'kg'
					},
					{
						id:2,
						productName:'塑料袋',
						count:200,
						unitName:'kg',
						remark:''
					}
				],
				boms:[ //bom单
					[
						{
						bomCode: "544",
						createTime: 1739346496000,
						id: 4,
						name: "1454",
						productName: "小白菜5kg",
						searchName: "24245",skuid: 11,
						type: 1,
						unitName: "kg",
						},
						{
						bomCode: "544",
						createTime: 1739346496000,
						id: 3,
						name: "1454",
						productName: "土豆5kg（精品）",
						searchName: "24245",skuid: 11,
						type: 1,
						unitName: "kg",
						}
					]
				],
				id:''
			
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
				uni.setNavigationBarTitle({
				title: '编辑BOM单'
				});
			}
			
		},
		methods:{
			// 提交
			submit(){
				// createBom()
			},
			// 获取bom单列表
			getBomData(id){
				console.log('id:',id);
			},
			handeleBom(e){
				console.log('e:',e);
				this.obj.name = e.value[0].productName
				this.obj.bomId = e.value[0].id
				this.obj.bomCode = e.value[0].bomCode
				this.bomShow = false
				this.getBomData(e.value[0].id)
			},
			// 生产类型
			handeleConfirm(e){
				this.obj.type = e.value[0].label
				this.obj.id = e.value[0].id
				this.show = false
			}
		}
	}
</script>

<style scoped>
	.inesTypes{
		
	}
	.placeholderClass{
		font-size: 24rpx;
	}
	.submit {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.all{
		width: 100%;
		min-height: 300rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
	}
	.materialBlock{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E8E8E8;
	}
	.material{
		width: 100%;
		height: 72rpx;
		font-size: 24rpx;
		padding: 0 31rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	.inesBlock{
		width: 688rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #E8E8E8;
		font-size: 24rpx;
	}
	.ines{
		width: 100%;
		min-height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		
	}
	.header{
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 38rpx;
		box-sizing: border-box;
	}
	.container{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
		font-size: 24rpx ;
	}
</style>